<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
请输入: <input id="content" type="text"/>
<button onclick="sendMsg()">发送</button>
<button onclick="closeWebsocket()">关闭</button>
<ul id="msgList"></ul>
</body>
<script>
  /* 参考: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket */
  var socket = new WebSocket('ws://localhost:8889/websocket01?name=websocket_name');

  // 指定连接成功后的回调
  socket.onopen = function (event) {
    console.log("建立连接成功")
  }

  // 发送消息给服务器
  function sendMsg() {
    var content = document.querySelector('#content');
    socket.send(content.value) // 使用websocket发送消息到服务器
  }

  // 收到服务器的消息时的回调
  socket.onmessage = function (ev) {
    console.log("收到服务器消息: " + JSON.stringify(ev))
    var ul = document.querySelector('#msgList');
    var li = document.createElement('li');
    li.innerText = ev.data
    ul.appendChild(li)
  }

  // 手动关闭websocket
  function closeWebsocket() {
    socket.close()
  }

  // 指定连接关闭后的回调
  socket.onclose = function (event) {
    console.log("连接关闭")
  }

</script>
</html>